<template>
	<view class="workerInfo">
		<view class="upside">
			<view class="msg">
				<view class="tip">工号:</view>
				<view  class="content">{{this.workerInfo.username}}</view>
			</view>
			<view class="msg">
				<view class="tip">姓名:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.realName}}</view>
				<input class="content-input" v-else v-model="this.workerInfo.realName"></input>
			</view>
			<view class="msg">
				<view class="tip">身份:</view>
				<view  class="content">
				  <template v-if="this.workerInfo.role == 1">管理员</template>
				  <template v-else-if="this.workerInfo.role == 2">根用户</template>
				  <template v-else>编辑者</template>
				</view>
			</view>
			<view v-if="this.workerInfo.role !== 1" class="msg">
				<view class="tip">班组:</view>
				<view class="content">{{this.workerInfo.group}}</view>
			</view>
			<view class="msg">
				<view class="tip">电话:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.phone}}</view>
				<input class="content-input" v-else v-model="this.workerInfo.phone"></input>
			</view>
			<view class="msg">
				<view class="tip">邮箱:</view>
				<view  class="content" v-if="this.disabled === true">{{this.workerInfo.email}}</view>
				<input class="content-input" v-else v-model="this.workerInfo.email"></input>
			</view>
		</view>
		<view class="downside">
			<button v-if="disabled === true" class="btn" type="primary" @tap="changeMsg">修改信息</button>
			<button v-if="disabled === false" class="btn" type="primary" @tap="confirmChange">完成</button>
			<button v-if="disabled === false" class="btn" type="default" @tap="()=>{
				this.disabled =true
			}">取消</button>
		</view>
	</view>
</template>

<script>
import request from '../../../common/request.js'
export default {
	data() {
		return {
			disabled:true,
			workerInfo:{
				realName:'',
				username:'',
				userId:1,
				role:'',
				group:'',
				phone:'',
				email:'',
				classId:''
			}
		}
	},
	mounted(){
		this.workerInfo = uni.getStorageSync('userInfo')
		this.getClassName();
	},
	onShow() {
		console.log(this.workerInfo)
	},
	methods: {
		changeMsg(){
			this.disabled = false
		},
		confirmChange(){
			this.disabled = true
			console.log(parseInt(this.workerInfo.userId))
			console.log(this.workerInfo)
			request('/users/account/fixAccount','PUT',{},{
				userId : parseInt(this.workerInfo.userId),
				username : this.workerInfo.username,
				realName : this.workerInfo.realName,
				email : this.workerInfo.email,
				phone : this.workerInfo.phone,
				classId: this.workerInfo.classId?this.workerInfo.classId:null,
				role: this.workerInfo.role,
			}).then(res=>{
				console.log(res)
				uni.setStorageSync('userInfo' , this.workerInfo)
			})
		},
		getClassName(){
			request(`/users/class/getClass/${this.workerInfo.classId}`,'GET').then(res=>{
				console.log(res)
				this.workerInfo.group = res.data.data.className
			})
		}
	}
}
</script>

<style scoped>
.workerInfo{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.upside{
	margin-top: 20px;
	width: 80%;
	background-color: #f5f5f5;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
}
.msg{
	display: flex;
	margin-bottom: 10px;
}
.tip{
	font-size: 20px;
	margin-right: 10px;
}
.content{
	font-size: 20px;
}
.content-input{
	font-size: 20px;
	background-color: #fff;
	width: 80%;
}
.downside{
	width: 90%;
}
.btn{
	margin-top: 20px;
	border-radius: 15px;
}
</style>
